import { Navbar } from 'flowbite-react'
import { FaBook, FaChartLine } from 'react-icons/fa'
import Link from 'next/link'

export default function AppNavbar() {
  return (
    <Navbar fluid className="border-b">
      <Navbar.Brand as={Link} href="/">
        <FaBook className="mr-2 text-blue-600 text-xl" />
        <span className="self-center text-xl font-semibold whitespace-nowrap">Anki 记忆卡片</span>
      </Navbar.Brand>
      <Navbar.Toggle />
      <Navbar.Collapse>
        <Navbar.Link as={Link} href="/anki/decks">
          卡片管理
        </Navbar.Link>
        <Navbar.Link as={Link} href="/anki/study">
          开始学习
        </Navbar.Link>
        <Navbar.Link as={Link} href="/anki/stats">
          <div className="flex items-center gap-2">
            <FaChartLine />
            学习统计
          </div>
        </Navbar.Link>
      </Navbar.Collapse>
    </Navbar>
  )
}